<template>
  <div class="content-view ">
    <div class="tree-box">
      <div class="mt10">
        <Tree :data="treeData" :render="renderContent" @on-select-change="selectChange"></Tree>
      </div>

    </div>
    <div class="content ">
      <div class="title-box">
        <h1 class="title "> {{selectRow}}</h1>

        <div class="refresh" @click="refresh">
          <Icon type="md-refresh" size="24" />
        </div>

      </div>

      <div class="edit-text">
        <aceEditor ref="aceEditor" v-model="detail" @init="editorInit"></aceEditor>
      </div>
    </div>
  </div>
</template>

<script>
import uiTool from '@/libs/uiTool'
import sys_log_serve from '@/api/system/sys_log_serve'
import aceEditor from 'vue2-ace-editor'

export default {
  components: {
    aceEditor: aceEditor,
  },
  data() {
    return {
      selectRow: '',
      treeData: [],
      detail: '',
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.list()

      let aceEditor = this.$refs['aceEditor']
      aceEditor.editor.setReadOnly(true)
      aceEditor.editor.setOption('wrap', 'free')
      aceEditor.editor.setFontSize(18) //设置字号
      aceEditor.editor.session.setMode('ace/mode/javascript') // 设置编辑语言
      aceEditor.editor.setTheme('ace/theme/xcode') // 设置主题  cobalt monokai，twilight,(暗黑)，xcode(亮白)
    },
    editorInit() {
      require('brace/ext/language_tools') //语言扩展先决条件...
      require('brace/mode/html')
      require('brace/mode/javascript') //语言
      require('brace/mode/less')
      require('brace/theme/chrome')
      require('brace/theme/xcode')
      require('brace/theme/monokai')
      require('brace/theme/cobalt')
      require('brace/theme/twilight')
    },

    async list() {
      let res = await sys_log_serve.all()
      if (res.data && res.data.length > 0) {
        this.treeData = res.data
        this.selectChange([res.data[0]])
      } else {
        this.treeData = []
        this.selectRow = ''
      }
    },
    renderContent(h, { root, node, data }) {
      let color = data.title.indexOf('logError') > -1 ? 'red' : '#000'
      return h(
        'span',
        {
          style: {
            display: 'inline-block',
            width: '100%',
            margin: '5px',
            color: color,
          },
        },
        [
          h('span', [
            h('Icon', {
              props: {
                type: 'ios-paper-outline',
              },
              style: {
                marginRight: '8px',
              },
            }),
            h('span', data.title),
            h('Icon', {
              props: {
                type: 'ios-trash',
                size: '18',
              },
              on: {
                click: () => {
                  this.deleteLog(data)
                },
              },
              style: {
                'margin-left': '8px',
              },
            }),
          ]),
        ]
      )
    },
    async selectChange(row) {
      row[0].selected = true
      this.selectRow = row[0].title
      let res = await sys_log_serve.detail({ title: this.selectRow })
      this.detail = res.data
    },

    async deleteLog(row) {
      uiTool.delConfirm(async () => {
        await sys_log_serve.delete({ title: row.title })
        this.list()
      })
    },

    async refresh() {
      let title = this.selectRow
      let res = await sys_log_serve.detail({ title })
      this.detail = res.data
    },
  },
}
</script>

<style lang="less" scoped>
.content-view {
  display: flex;
  flex-direction: row;
  .tree-box {
    height: 90vh;
    width: 300px;
    border-right: solid 1px #ccc;
    overflow: auto;
  }

  .content {
    height: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;

    .title-box {
      padding-right: 30px;
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: solid 1px #ccc;

      .title {
        width: 100%;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        line-height: 50px;
        margin: 0px 10px;
      }

      .refresh {
        float: right;
        cursor: pointer;
        color: #2d8cf0;
      }
    }

    .edit-text {
      overflow-y: auto;
      padding: 10px;
      height: 8rem;
      color: #423e3e;
    }
  }
}
</style>